<template>
	<view class="content">
		<view class="banner">
			<view class="focus" v-if="focus.length != 0">
				<view class="focus-item" :key="index" v-for="(user, index) in focus">
					<u-avatar :src="user.avatar" :size="64"></u-avatar>
					<view class="nickname">{{ user.nickname }}</view>
				</view>
			</view>
			<view class="no-data" v-else>
				<text>您没有关注任何人</text>
			</view>
		</view>
		<!-- 无关注用户 -->
		<view v-if="focus.length == 0">
			<view class="card none-focus" v-for="i in 10" :key="i">
				<view class="card-header">
					<view class="card-header__icon">
						<u-avatar src="/static/1.png" :size="44"></u-avatar>
					</view>
					<view class="card-header__title">
						<view class="header-title">用户名</view>
						<view class="header-label">被关注&nbsp;10</view>
					</view>
					<view class="card-header__value">
						<view class="btn">
							<u-icon name="plus" color="#6E86FF" :size="14" bold></u-icon>
						</view>
					</view>
				</view>
				<view class="card-body">
					<image class="img" v-for="img in imgs" :key="img" :src="img"
						:style="{ width: `${boxWidth}px`, height: `${boxWidth}px`}" @click="previewImg(img)"></image>
				</view>
			</view>
		</view>
		<!-- 存在关注用户 -->
		<view v-else>
			<view class="card">
				<view class="card-body">
					<view class="card-body__swiper" @click="goArticle()">
						<u-swiper :list="list" :autoplay="false" :radius="0" imgMode="scaleToFill" indicator indicatorMode="dot"
							:height="swipeHeight"></u-swiper>
					</view>
				</view>
				<view class="card-footer">
					<view class="card-footer__user">
						<u-avatar :src="imgs[0]" :size="24"></u-avatar>
						<view class="nickname">段段</view>
					</view>
					<view class="card-footer__controll">
						<view class="thumb">
							<text class="icon icon-thumb-active"></text>
							<text class="value">3.2K</text>
						</view>
						<view class="comment">
							<text class="icon icon-comment"></text>
							<text class="value">108</text>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="loadMore"></u-loadmore>
		</view>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				focus: [{}],
				imgs: [
					'https://img.js.design/assets/img/626119e100de3c4aa1ae2e6a.png',
					'https://img.js.design/assets/img/626119e152e42d7d4c8e14e2.png',
					'https://img.js.design/assets/img/626119e375d376ee080460ab.png'
				],
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		computed: {
			bgColor() {
				if (this.focus.length == 0) {
					return '#FFFFFF'
				}
				return '#F4F4F7'
			},
			boxWidth() {
				const rs = uni.getSystemInfoSync()
				console.log(rs.windowWidth - 28);
				const width = (rs.windowWidth - 28 - 24 - 28) / 3
				return width
			},
			swipeHeight() {
				return ((uni.getSystemInfoSync().windowWidth - 24) / (330 / 220)).toFixed(2)
			}
		},
		watch: {
			focus(val) {
				uni.$emit('tab1Focus', val)
			}
		},
		methods: {
			goArticle() {
				uni.navigateTo({
					url: '/pages/common/article'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		margin: 10px 0 22px;

		.focus {
			display: flex;
			overflow-x: auto;

			&-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin: 0 14px;
				text-align: center;
			}

			.nickname {
				margin-top: 5px;
				color: #232832;
				font-size: 12px;
				line-height: 14px;
				font-weight: 400;
			}
		}

		.no-data {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F4F4F7;
			margin: 0 22px;
			border-radius: 14px;
			color: #787B86;
			font-size: 15px;
			line-height: 18px;
			font-weight: 400;

			text {
				padding: 26px 0;
			}
		}
	}

	.card {
		margin: 20px 12px;
		background-color: #FFFFFF;
		border-radius: 14px;
		padding: 0;
		box-sizing: border-box;
		overflow: hidden;

		.card-header {
			display: flex;
			align-items: center;

			&__title {
				flex: 1;
				margin-left: 10px;
			}

			.header-title {
				color: #232832;
				font-size: 15px;
				font-weight: 500;
				line-height: 18px;
			}

			.header-label {
				color: #B9BCC3;
				font-size: 10px;
				line-height: 12px;
				font-weight: 400;
			}

			&__value {

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 4px 14px;
					border-radius: 15px;
					border: 1px solid #6E86FF;
					color: #6E86FF;
					font-weight: 600;
				}
			}
		}

		.card-body {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 0;

			.img {
				border-radius: 8px;
				border-radius: 10px;

				&:nth-child(2n) {
					margin: 0 14px;
				}
			}

			&__swiper {
				width: 100%;
				border-radius: 15px;
				overflow: hidden;
			}
		}

		.card-footer {
			display: flex;
			align-items: center;
			width: 100%;

			&>view {
				width: 100%;
			}

			&__user {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 15px;
			}

			.nickname {
				margin-left: 8px;
				color: #232832;
				font-size: 15px;
				line-height: 18px;
				font-weight: 400;
			}

			&__controll {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					display: flex;
					align-items: center;
					margin-right: 16px;
				}

				.icon {
					color: #787B86;
					font-size: 20px;
					line-height: 20px;
				}

				.icon-thumb-active {
					color: #E7166B !important;
				}

				.value {
					margin-left: 8px;
					color: #787B86;
					font-size: 12px;
					line-height: 14px;
					font-weight: 400;
				}
			}
		}
	}

	.none-focus {
		padding: 10px 14px;

		.card-body {
			margin-top: 20px;
		}
	}
</style>